<template>
  <div class="pages storesManagement">
    <div class="pageLevel" v-if="!sub">
      <div class="operationBox tableSearch">
        <el-button @click="routerPush('',1)" v-if="setRole('新增')" type="primary" size="mini">新增</el-button>
      </div>
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-input class="input" v-model="selectdata.keyword" size="small" placeholder="输入公司名称或编号"></el-input>
          <span class="selectName">开户状态:</span>
          <el-select v-model="selectdata.openAccount" placeholder="开户状态" size="small">
            <el-option label="全部" value></el-option>
            <el-option label="未开户" value="0"></el-option>
            <el-option label="已开户" value="1"></el-option>
          </el-select>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="getTableData(pageData.pageSize,1)" class="Button">查询</el-button>
          <!-- <el-button type="primary" icon="el-icon-error" size="mini" @click="clearSelect" class="Button">清空</el-button> -->
        </el-form>
      </div>

      <!-- 表格 -->
      <div class="tableMain">
        <el-table :data="tableData" ref="multipleTable" stripe style="width: 100%">
          <el-table-column prop="shopCode" label="商户编码" align="center"></el-table-column>
          <el-table-column prop="name" label="门店名称" align="center"></el-table-column>
          <el-table-column prop="address" label="门店地址" align="center"></el-table-column>
          <el-table-column prop="principal" label="法人" align="center"></el-table-column>
          <el-table-column prop="openAccount" :formatter="openAccount" align="center" label="开户状态">
          </el-table-column>
          <el-table-column prop="status" :formatter="status" label="状态" align="center"></el-table-column>
          <el-table-column prop="invitationCode" label="邀请码" align="center"></el-table-column>
          <el-table-column prop="name" align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="small" @click="routerPush(scope.row.id,0)" type="text" v-if="setRole('查看')" class="addDetail">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 页码 -->
        <page-unit :pageData="pageData" :func="getTableData"></page-unit>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
// import { routerTo, openAccount, status, pageInit } from "@/util";

import pageUnit from "@/components/Page";
import util from "@/util";
import { mapState } from "vuex";
import state from "@/util/state";
import { selectBaseShopPageList, deleteBaseShop } from "@/api";

export default {
  components: {
    pageUnit
  },
  computed: mapState(["sub", "merchantId", "power"]),
  data() {
    return {
      selectdata: {
        keyword: "",
        openAccount: ""
      },
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      },
      tableData: [
        // {
        // //   shopCode: "001",
        // //   name: "有家门店",
        // //   address: "前门外前门大街",
        // //   principal: "法师",
        // //   openAccount: 0,
        // //   status: 0
        // }
      ]
    };
  },
  mounted() {
    this.getTableData(this.pageData.pageSize, this.pageData.currentPage);
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.getTableData(this.pageData.pageSize, 1);
        }
      },
      deep: true
    }
  },
  methods: {
    //配置权限
    setRole(key) {
      return util.selectTitle(this.power, key);
    },
    openAccount: state.openAccount,
    status: state.status,
    routerPush(id, status) {
      util.routerTo(
        "/operate-management/store-management/store-storesManagement/store-storesCreate",
        {
          status: status,
          id: id
        }
      );
    },
    //表格查询
    getTableData(pageSize, pageNum) {
      let data = {
        nameOrCode: this.selectdata.keyword,
        pageNum: pageNum,
        pageSize: pageSize,
        openAccount: this.selectdata.openAccount,
        businessId: this.merchantId,
        //  businessId: this.compId,
        type: 3 //1供应商（查找客户） 2-客户（查找供应商） 3-连锁（查客户）
      };
      selectBaseShopPageList(data).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.pageData.totalItems = res.data.pageTotal;
        }
      });
    },
    //清空查询
    clearSelect() {
      this.selectdata = {
        keyword: "",
        openAccount: ""
      };
    }
  }
};
</script>
<style scoped>
.selectName {
  font-size: 14px;
}
</style>


